<template>
  <div class="system-info-container" id="sys-info">
    <el-card>
      <el-descriptions title="系统信息" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">主机名</div>
          </template>
          {{ info?.hostName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">操作系统</div>
          </template>
          {{ info?.systemName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">运行时长</div>
          </template>
          {{ info?.upTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">系统架构</div>
          </template>
          {{ info?.osArch }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="cpu-memory">
      <el-card>
        <el-descriptions title="CPU信息" :column="1">
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">型号</div>
            </template>
            {{ info?.cpuName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">逻辑处理器数量</div>
            </template>
            {{ info?.logicalCoreCount }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">频率</div>
            </template>
            {{ info?.maxFrequencyStr }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">CPU使用率</div>
            </template>
            {{ info?.cpuUsed }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card>
        <el-descriptions title="内存信息" :column="2">
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">总内存</div>
            </template>
            {{ info?.totalMemory }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">JVM最大内存</div>
            </template>
            {{ info?.jvmMaxMemory }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">已使用内存</div>
            </template>
            {{ info?.usedMemory }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">JVM已使用内存</div>
            </template>
            {{ info?.jvmUsedMemory }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">未使用内存</div>
            </template>
            {{ info?.availableMemory }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">JVM未使用内存</div>
            </template>
            {{ info?.jvmFreeMemory }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">内存使用率</div>
            </template>
            {{ info?.memoryUsed }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">JVM内存使用率</div>
            </template>
            {{ info?.jvmMemoryUsed }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <el-card>
      <el-descriptions title="JVM信息" :column="2">
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">Java名称</div>
          </template>
          {{ info?.jvmName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">Java版本</div>
          </template>
          {{ info?.jvmVersion }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">启动时间</div>
          </template>
          {{ info?.jvmStartTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">运行时长</div>
          </template>
          {{ info?.jvmUpTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">Java安装目录</div>
          </template>
          {{ info?.jvmHome }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">项目运行目录</div>
          </template>
          {{ info?.projectPath }}
        </el-descriptions-item>
        <el-descriptions-item>
          <div class="jvmArgs">
            <div style="min-width: 125px !important">运行参数</div>
            <div style="max-width: 800px; word-wrap: break-word">
              {{ info?.jvmArgs }}
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { getUserList } from '@/api/systemInfo'

const info = ref<SystemInfo>()

onMounted(() => {
  let options = {
    target: '#sys-info',
    text: '获取系统信息中...',
    background: '#ffffff15'
  }
  const loadingInstance = ElLoading.service(options)

  getUserList()
    .then((res) => {
      if (res.code === 200) {
        info.value = res.data
      }
    })
    .finally(() => {
      loadingInstance.close()
    })
})
</script>

<style lang="scss" scoped>
.system-info-container {
  height: 100%;
  width: 100%;

  .cpu-memory {
    margin: 10px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    @media screen and (max-width: 900px) {
      grid-template-columns: 1fr;
      row-gap: 10px;
    }
  }
  .cell-item {
    float: left;
    width: 110px;
  }
  .jvmArgs {
    display: flex;
    justify-content: left;
  }
}
</style>
